import {
    Modal,
    Form,
    Input
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';

const FormItem = Form.Item;

export interface AddModelProps extends FormComponentProps {
    modelVisible: boolean;
    handleModalVisible: () => void;
    handleAdd: (values: any) => void;
}

export interface AddModelState {

}

class AddModel extends Component<AddModelProps, AddModelState> {
    state: AddModelState = {

    }

    handleSubmit= () => {
        const { form, handleAdd } = this.props;

        form.validateFields((err, values) => {
            if (!err) {
                handleAdd(values);
            }
        })
    }

    render() {
        const {
            modelVisible,
            form,
            handleModalVisible
        } = this.props;
        return (
            <Modal
                title="新增分类"
                width={600}
                visible={modelVisible}
                onOk={this.handleSubmit}
                onCancel={() => handleModalVisible()}>
                <FormItem 
                    labelCol={{ span: 5 }} 
                    wrapperCol={{ span: 15 }} 
                    label="分类名称">
                    {form.getFieldDecorator('typeName', {
                    rules: [{ 
                        required: true,
                        message: '请输入分类名称！' }]
                    })(<Input placeholder="请输入分类名称" />)}
                </FormItem>
            </Modal>
        )
    }
}

export default Form.create<AddModelProps>()(AddModel);